<layout name="popup" />
<block name="content">
	<style>
		.avtar {
			box-sizing: border-box;
			color: rgb(103, 106, 108);
			display: inline-block;
			font-size: 13px;
			height: 120px;
			line-height: 18.5714px;
			overflow-x: hidden;
			overflow-y: hidden;
			text-align: center;
			width: 120px;
			border: 1px solid #ccc;
		}
	</style>
	<div class="popup-header">
		<h1>上传头像</h1>
		<i class="mid"></i>
		<a class="btn btn-normal" onclick="save();">确定</a>
		<a class="btn btn-return" onclick="close_popup();">取消</a>
	</div>
	<div class="popup-body">
		<!-- Image cropper -->
		<div style="max-width:400px;max-height:400px;float:left;">
			<div class="image-crop" style="margin-top:15px;margin-left:15px;margin-right:15px;">
				<img src="{$pic}">
			</div>
		</div>
		<div class="text-center" style="width:160px;float:right;">
			<br>
			<label title="上传图片" for="input_image" class="btn btn-normal">
				<input type="file" accept="image/*" name="file" id="input_image" class="hidden">
				上传头像</label>
			<br>
			<br>
			<div class="img-preview img-preview-sm avtar" ></div>
		</div>
	</div>
</block>
<block name="js">
	<script>
		var index = parent.layer.getFrameIndex(window.name);
		layui.use(['global'], function() {
			layui.link('layui/ext/plugins/cropper/cropper.min.css');
			var cropper = 'layui/ext/plugins/cropper/cropper.min.js';
			load_js(cropper, function() {
				var $image = $(".image-crop > img");
				$image.cropper({
					aspectRatio : 1,
					preview : ".img-preview",
					done : function(data) {
					}
				});
				var fn = {
					save : function() {
						var img_data = $image.cropper("getDataURL");
						var regS = new RegExp("[+]", "g");
						img_data = img_data.replace(regS, "_a");
						var regS = new RegExp("[/]", "g");
						img_data = img_data.replace(regS, "_b");
						var regS = new RegExp("[=]", "g");
						img_data = img_data.replace(regS, "_c");

						var vars = 'pic=' + img_data + '&id={$id}';
						var url = '{:url("save_avatar")}';
						$.ajax({
							type : "POST",
							url : url,
							data : vars,
							dataType : "json",
							success : function(ret) {
								if (ret.status) {
									var now = new Date();
									$('#pic', parent.document).attr('src', ret.pic + '?a=' + now.getTime());
									parent.layer.msg(ret.info);
									parent.layer.close(index);
								}
							}
						});
					},
					close_popup : function() {
						parent.layer.close(index);
					},
				};
				win_exp(fn);
				var $input_image = $("#input_image");
				if (window.FileReader) {
					$input_image.change(function() {
						var fileReader = new FileReader(), files = this.files, file;
						if (!files.length) {
							return;
						}
						file = files[0];
						if (/^image\/\w+$/.test(file.type)) {
							fileReader.readAsDataURL(file);
							fileReader.onload = function() {
								$input_image.val("");
								$image.cropper("reset", true).cropper("replace", this.result);
							};
						} else {
							showMessage("Please choose an image file.");
						}
					});
				} else {
					$input_image.addClass("hide");
				}
			});
		});
	</script>
</block>
